import React, { useState, useEffect } from "react";
import { Pagination } from 'antd';
import style from "./index.module.less";
import img1 from "@/style/imgs/publishCase/one.png";
import { getPublishCaseList } from "../../../../api/publishCase.js";

const Publish = () => {
  const [tabs, setTabs] = useState([
    { title: "高分案例", id: 1 },
    { title: "医学", id: 2 },
    { title: "生物学", id: 3 },
    { title: "农林科学", id: 4 },
    { title: "环境与生态学", id: 5 },
    { title: "数理化与地球科学", id: 6 },
    { title: "工程材料学", id: 7 },
    { title: "人文社会科学", id: 8 },
  ]);
  const [tabActive, setTabActive] = useState(null);
  const [list, setList] = useState([]);
  function handleTab(type: any) {
    setTabActive(type);
    setQueryParams({
      ...queryParams,
      disciplineField: tabs[type].title
    });
  }
  interface QueryParamsInter {
    pageNo: number,
    pageSize: number,
    total: number,
    disciplineField: string,
  }
  const [queryParams, setQueryParams] = useState<QueryParamsInter>({
    pageNo: 1,
    pageSize: 10,
    total: 11,
    disciplineField: "",
  });
  useEffect(() => {
    getDataList();
  }, [queryParams.pageNo, queryParams.disciplineField]);

  // 分页
  const handleChange = (page: number) => {
    setQueryParams({
      ...queryParams,
      pageNo: page,
    });
  }
  // 获取列表数据
  const getDataList = async () => {
    console.log(queryParams.pageNo);
    const {
      pageNo,
      pageSize,
      disciplineField
    } = queryParams;
    const res: any = await getPublishCaseList({
      pageNo,
      pageSize,
      disciplineField
    });
    console.log("列表", res);
    const { list, total } = res.data;
    setList(list);
    setQueryParams({
      ...queryParams,
      total: total
    });
  }

  return <>
    <div className={style.header}>
      <div className="h3 strong white">学科领域：</div>
      <div className={style.tab_body}>
        {tabs.map((item: any, index: number) => {
          return <div className={`${style.tab_item} ${tabActive === index ? style.active : ''}`} key={item.id} onClick={() => handleTab(index)}>
            {item.title}
          </div>
        })}
      </div>
    </div>
    <div className={style.content_body}>
      {list.map((item: any) => {
        return <div className={style.content_item} key={item.publishId}>
          <img src={item.journalName} alt="图片加载失败" />
          <div className={style.desic}>
            <div>
              <div className="h4">期刊名称</div>
              <a href={item.airticleNameLink} style={{ color: '#333' }}>{item.journalName}</a>
            </div>
            <div>
              <div className="h4">文章名称</div>
              <div>{item.airticleName}</div>
            </div>
            <div>
              <div className="h4">第一作者</div>
              <div>{item.author}</div>
            </div>
            <div>
              <div className="h4">通讯单位</div>
              <div className={style.threeRow} title={item.communicationUnit}>{item.communicationUnit}</div>
            </div>
            <div>
              <div className="h4">学科领域</div>
              <div>{item.disciplineField}</div>
            </div>
          </div>
        </div>
      })}
    </div>
    {queryParams.total > 10 && <div className={style.pagination_body}>
      <Pagination defaultCurrent={queryParams.pageNo} total={queryParams.total} onChange={handleChange} />
    </div>}
  </>
}

export default Publish;